<script >
import image1 from '@/static/img/感冒发热.png';
import image2 from '@/static/img/成人情趣.png';
import image3 from '@/static/img/肠胃消化.png';
import image4 from '@/static/img/口罩器械.png';
import image5 from '@/static/img/家中常备.png';
import image6 from '@/static/img/慢病用药.png';
import image7 from '@/static/img/儿童用药.png';
import image8 from '@/static/img/滋补养身.png';
import image9 from '@/static/img/中药饮品.png';
import image10 from '@/static/img/全部分类.png';
import image11 from '@/static/img/hot/呼吸内科.png';
import image12 from '@/static/img/hot/泌尿内科.png';
import image13 from '@/static/img/hot/妇科.png';
import image14 from '@/static/img/hot/内分泌.png';
import image15 from '@/static/img/hot/老年病.png';
import image16 from '@/static/img/hot/皮肤病科.png';
import image17 from '@/static/img/hot/消化内科.png';
import image18 from '@/static/img/hot/心血管内科.png';
import image19 from '@/static/img/找医生.png';
import image20 from '@/static/img/快速问诊.png';

export default {
  name:'HomeView',
  methods:{
    navigateTo(path) {
      this.$router.push(path);
    },
  },
  data(){
    return{
      image1, image2, image3, image4, image5,
      image6, image7, image8, image9, image10,
      image11,image12,image13,image14,image15,
      image16,image17,image18,image19,image20
    }
  }
}
</script>

<template>
<div class="header">
    <span class="header-text"> 微风医药欢迎您 </span>
  </div>
<div>
  <!--中间下方的盒子-->
  <div class="under-box">
    <div class="box1">
        <img  :src="image19" alt="Image19" @click="navigateTo('/HomePage/department')">
    </div>

    <div class="box2">
     <img  :src="image20" alt="Image20" @click="navigateTo('/HomePage/AiServe')">
    </div>
  </div>
</div>

  <!--商城小页面  下层父容器-->
 <div class="boss-parent">
  <div class="parent-container1">
  <!--父容器1开始-->
  <div class="image-container1">
    <div class="image-item"
    >
      <img  :src="image1" alt="Image1">
      <span class="image-caption">感冒发烧</span>
    </div>
    <div class="image-item">
      <img  :src="image2" alt="Image2">
      <span class="image-caption">成人情趣</span>
    </div>
    <div class="image-item">
      <img  :src="image3" alt="Image3">
      <span class="image-caption">肠胃消化</span>
    </div>
    <div class="image-item">
      <img  :src="image4" alt="Image4">
      <span class="image-caption">口罩器械</span>
    </div>
    <div class="image-item">
      <img  :src="image5" alt="Image5">
      <span class="image-caption">家中常备</span>
    </div>
  </div>
  <!--父容器1结束-->

  <!--父容器2开始-->
  <div class="image-container2">
    <div class="image-item">
      <img  :src="image6" alt="Image6">
      <span class="image-caption">慢病用药</span>
    </div>
    <div class="image-item">
      <img  :src="image7" alt="Image7">
      <span class="image-caption">儿童用药</span>
    </div>
    <div class="image-item">
      <img  :src="image8" alt="Image8">
      <span class="image-caption">滋补养身</span>
    </div>
    <div class="image-item">
      <img  :src="image9" alt="Image9">
      <span class="image-caption">中药饮品</span>
    </div>
    <div class="image-item">
      <img  :src="image10" alt="Image10" @click="navigateTo('/HomePage/shop')">
      <span class="image-caption">全部分类</span>
    </div>
  </div>
  <!--父容器2结束-->
</div>

  <div class="parent-container2">
    <!--父容器1开始-->
    <div class="image-container1">
      <div class="image-item">
        <img  :src="image11" alt="Image11">
        <span class="image-caption">呼吸内科</span>
      </div>
      <div class="image-item">
        <img  :src="image12" alt="Image2">
        <span class="image-caption">泌尿外科</span>
      </div>
      <div class="image-item">
        <img  :src="image13" alt="Image3">
        <span class="image-caption">妇科</span>
      </div>
      <div class="image-item">
        <img  :src="image14" alt="Image4">
        <span class="image-caption">内分泌</span>
      </div>

    </div>
    <!--父容器1结束-->

    <!--父容器2开始-->
    <div class="image-container2">
      <div class="image-item">
        <img  :src="image15" alt="Image15">
        <span class="image-caption">老年病</span>
      </div>
      <div class="image-item">
        <img  :src="image16" alt="Image16">
        <span class="image-caption">皮肤病科</span>
      </div>
      <div class="image-item">
        <img  :src="image17" alt="Image17">
        <span class="image-caption">消化内科</span>
      </div>
      <div class="image-item">
        <img  :src="image18" alt="Image18">
        <span class="image-caption">心血管内科</span>
      </div>
    </div>
    <!--父容器2结束-->
  </div>
</div>
</template>

<style >
.header {
  z-index: 10000;
  position: fixed;
  top: 25px;
  width: 1265px;
  height: 80px;
  display: flex;
  align-items: center; /* 水平居中 */
  justify-content: flex-end; /* 水平靠右 */
  padding-right: 20px;
  border: 1px solid black;
  background-image: linear-gradient(to right top, #0000ff, #ffffff); /* 蓝白渐变 */
}
/*顶部文字*/
.header-text{
  position: fixed;
  top: 40px;
  text-align: center;
  padding:  0 10px;
  font-size: 40px;
}


.box1{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  width: 630px;
  height: 260px;
}
.box2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-left: 10px;;
  margin-right: 10px;
  width: 630px;
  height: 260px;
}
.box1 img{
  width: 620px;
  height: 260px;
  background-size: cover;
}
.box2 img{
  width: 620px;
  height: 260px;
  background-size: cover;
}
.under-box{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 110px;
  width: 1270px;
  height: 300px;
}


/*从这里往下是boss-parent的css内容*/
.parent-container1{
  width: 1000px;
  height: 270px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;/*设置子元素上下排列*/
  align-items: center;/*确保容器在父容器中水平居中垂直*/
  gap:5px;/*设置子容器之间的间隔*/
  border: 1px solid #4096ec;
  border-radius: 50px;
  margin-right: 5px;
}
.parent-container2{
  width: 1000px;
  height: 270px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;/*盒子外边距上方的距离*/
  padding: 10px;
  display: flex;
  flex-direction: column;/*设置子元素上下排列*/
  align-items: center;/*确保容器在父容器中水平居中垂直*/
  gap:5px;/*设置父容器之间的间隔*/
  border: 1px solid #4096ec;
  border-radius: 50px;
  margin-left: 5px;

}
/*最大容器设置*/
.boss-parent{
  display: flex;
  justify-content: space-between;
  align-items: stretch;/*stretch：将子元素拉伸以填满Flex容器的高度*/
}
/*改变图片之间的间距 子容器1*/
.image-container1{
  width: 500px;
  height: 100px;
  display: flex;
  gap: 10px;
  object-fit: cover;
  display: flex;
  justify-content: center;/*子元素在父容器中上下对齐*/
  align-items: center;/*子元素在父容器中水平居中*/
  padding: 20px;
}
/*改变图片之间的间距 子容器2*/
.image-container2{
  width: 500px;
  height: 80px;
  display: flex;
  gap: 10px;
  object-fit: cover;
  /*两个父容器之间的子元素进行对齐*/
  display: flex;
  justify-content: center;/*子元素在父容器中上下对齐*/
  align-items: center;/*子元素在父容器中水平居中*/
  padding: 20px;
}
/*改变文字与图片之间的间距*/
.image-caption{
  font-family: 宋体;
  text-align: center;
  margin-top: 5px;/*设置图片与文字之间的间隔*/

}
/*设置图片的大小*/
.image-item img{
  display: block;
  width: 100px;
  height: auto;
  background-size: cover;

}
.image-item{
  text-align: center;
}
/*顶部盒子*/
 body {
  margin: 0;
  padding: 0;
}
</style>